<template>
  <view class="app">
    <view class="main-box">
      <view class="form-box">
        <view class="form-item" @click="nav.jump('/pages/setting/info')">
          <text class="item-title">个人信息</text>
          <view class="item-right">
            <u-icon class="right-icon" size="26" color="#b7b7b7" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>

      <view class="form-box">
        <view class="form-item" @click="nav.jump('/pages/setting/change_phone')">
          <text class="item-title">更换手机号</text>
          <view class="item-right">
            <text>{{ fansStore.fansinfo.phone }}</text>
            <u-icon class="right-icon" size="26" color="#b7b7b7" name="arrow-right"></u-icon>
          </view>
        </view>
        <view class="form-item" @click="nav.jump('/pages/setting/reset_password')">
          <text class="item-title">修改密码</text>
          <view class="item-right">
            <u-icon class="right-icon" size="26" color="#b7b7b7" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <view class="footer">
      <view class="logout-btn" @click="userLogout">
        <u-icon custom-prefix="mt-icon" color="white" size="32" name="logout-right"></u-icon>
        <text class="ml-10rpx">退出登录</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { logout } from '@/api/fans';
  import { useFansStore } from '@/store/fans';
  import { msg } from '@/utils/msg';
  import { report } from '@/utils/exception';
  import { nav } from '@/utils/homer';

  const fansStore = useFansStore();

  const userLogout = () => {
    msg.confirm('确定退出登录？', () => {
      msg.loading();
      logout()
        .then((res) => {
          msg.hideLoading();
          fansStore.clearFansInfo();
          uni.navigateTo({ url: '/pages/auth/login' });
        })
        .catch((err) => {
          report(err);
        });
    });
  };
</script>

<style lang="scss" scoped>
  $fontSize: 28rpx;

  .main-box {
    margin: 25rpx;

    .form-box {
      padding: 0 25rpx;
      background: white;
      border-radius: 20rpx;
      margin-bottom: 20rpx;

      .form-item {
        display: flex;
        align-items: center;
        padding: 30rpx 0;

        &:not(:last-child) {
          border-bottom: 1rpx solid $borderColor;
        }

        .item-title {
          font-size: $fontSize;
          font-weight: 600;
          width: 160rpx;
          flex: none;
        }

        .item-right {
          display: flex;
          justify-content: flex-end;
          flex: 1;
          font-size: $fontSize;
          color: gray;

          .right-icon {
            position: relative;
            top: 2rpx;
            left: 8rpx;
            margin-left: 5rpx;
          }
        }
      }
    }
  }

  .footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 110rpx;
    background: white;

    .logout-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      font-size: 26rpx;
      font-weight: 600;
      color: white;
      margin: 0 auto;
      padding: 24rpx 0;
      border-radius: 50rpx;
      letter-spacing: 1rpx;
      background-image: linear-gradient(to right, #f3204f, #f33720);
      box-shadow: rgba(255, 28, 0, 0.2) 0 5rpx 12rpx;
    }
  }
</style>
